<script setup lang="ts">
const name = "Register"

import {getNowTime} from "@/utils/time";
import { ElNotification } from "element-plus"
import type {FormInstance, FormRules} from 'element-plus'
import {ref, onMounted, reactive} from "vue"
import router from "@/router";



onMounted(() => {
    // console.log('_______')

})

const username = ref<String>('')
const password = ref<String>('')


/**
 * 表单验证规则
 */
interface RuleForm {
  name: string
  password: string
  phone:string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  password: '',
  phone: ''
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 18, message: '输入长度在 3 ~ 18', trigger: 'blur'},
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {min: 6, max: 18, message: '输入长度在 6 ~ 18', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {min: 11, max: 11, message: '输入长度为11', trigger: 'blur'},
  ]
})

/**
 * 表单提交方法
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log('submit!')
      register()
    } else {
      console.log('error submit!', fields)
      ElNotification({
        title: '输入信息有误',
        message: getNowTime(),
        type: 'error',
      })

    }
  })
}



const login = () => {
    router.push("/login")

}

const register = () => {

}

</script>

<template>
    <div class="login-container">
        <div class="login-box">
            <h2 class="login-title">欢迎注册</h2>
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              size="default"
              status-icon
          >
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" placeholder="Enter Your Username" clearable/>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="Enter Your Phone Number" clearable maxlength="11" oninput="value=value.replace(/[^0-9]/g,'')"  />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="ruleForm.password" placeholder="Enter Your Password" clearable show-password />
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="submitForm(ruleFormRef)" class="login-button">Register</el-button>
          <hr>
          <el-button style="margin-top: 15px;" type="primary" @click="login" class="login-button">Log in</el-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f5f7fa;
}

.login-box {
    width: 400px;
    padding: 40px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.login-input {
    margin-bottom: 20px;
}

.login-button {
    width: 100%;
}
</style>